<template>
    <el-container>
        <el-header class="header-tabs">
            <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
                <el-tab-pane label="待完成" name="0"></el-tab-pane>
                <el-tab-pane label="已完成" name="1"></el-tab-pane>
                <el-tab-pane label="全部" name="2"></el-tab-pane>
            </el-tabs>
        </el-header>
        <el-header>
            <div class="left-panel">
                <!-- <el-button type="primary" icon="el-icon-plus" v-auth="'productionpaln.add'" @click="add"></el-button>
                <el-button type="danger" plain icon="el-icon-delete" v-auth="'productionpaln.delete'" :disabled="selection.length == 0" @click="batch_del"></el-button> -->
                <el-button type="warning" :disabled="selection.length == 0" @click="exportExcel">导出</el-button>
                <el-popconfirm title="确定要完成吗?" @confirm="batch_end" v-if="groupId == 0">
                    <template #reference>
                        <el-button type="danger" plain :disabled="selection.length == 0">批量完成</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm title="确定要变为未完成吗?" @confirm="batch_end" v-if="groupId == 1">
                    <template #reference>
                        <el-button type="danger" plain :disabled="selection.length == 0">批量未完成</el-button>
                    </template>
                </el-popconfirm>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-select v-model="search.complete" filterable placeholder="是否完成" @change="inChange" clearable>
                        <el-option label="完成" :value="1" />
                        <el-option label="未完成" :value="0" />
                    </el-select>
                    <el-input v-model="search.goods_model" placeholder="产品型号" clearable @keyup.enter="upsearch"></el-input>
                    <el-input v-model="search.production_code" placeholder="任务单号" clearable @keyup.enter="upsearch"></el-input>
                    <el-input v-model="search.contract_code" placeholder="销售单号" clearable @keyup.enter="upsearch"></el-input>
                    <!-- <el-date-picker v-model="search.create_time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px" /> -->
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border @cell-dblclick="cellClick" @header-dragend="headerDragend" :params="query">
                <!--  :cell-style="cellStyle" -->
                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="60"></el-table-column>
                <el-table-column label="产品型号" prop="product.goods_model" align="center" width="110"></el-table-column>
                <el-table-column label="颜色" prop="color_name" align="center" width="110"></el-table-column>
                <el-table-column label="方向" prop="direction_name" align="center" width="110"></el-table-column>
                <el-table-column label="速比" prop="speed_ratio" align="center" width="110"></el-table-column>
                <el-table-column label="法兰" prop="flange" align="center" width="110"></el-table-column>
                <el-table-column label="孔数" prop="hole" align="center" width="110">
                    <template #default="scope">
						<div class="input-box">
							<el-input size="mini" v-model="scope.row.hole" v-if="scope.row.flag" :ref="`hole` + scope.row.id" @blur="cell_save(scope.row)"></el-input>
							<span v-if="!scope.row.flag">{{ scope.row.hole }}</span>
						</div>
					</template>
                </el-table-column>
                <el-table-column label="数量" prop="number" align="center" width="100"></el-table-column>
                <el-table-column label="使用现货" prop="is_stock" align="center">
                    <template #default="scope">
                        {{scope.row.is_stock ? '是' : '否'}}
                    </template>
                </el-table-column>
                <el-table-column label="客户" prop="customer.customer_name" align="center" width="100"></el-table-column>
                <el-table-column label="备注" prop="remark1" align="center"></el-table-column>
                <!-- <el-table-column label="备注2" prop="remark2" align="center"></el-table-column> -->
                <el-table-column label="任务单号" prop="production_code" align="center"></el-table-column>
                <el-table-column label="销售单号" prop="contract_code" align="center"></el-table-column>
                <!-- <el-table-column label="是否缺料" prop="material_shortage" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.material_shortage == 0 ? 'warning' : 'primary'">
                            {{scope.row.material_shortage == 0 ? '否' : '是'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否完成" prop="complete" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.complete == 0 ? 'warning' : 'primary'">
                            {{scope.row.complete == 0 ? '否' : '是'}}
                        </el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" align="center" width="140">
                    <template #default="scope">
                        <el-button-group>
                            <el-popconfirm title="是否执行该操作" @confirm="table_shortage(scope.row)">
                                <template #reference>
                                    <el-button text type="warning" size="small" v-auth="'assemble.shortage'" v-if="scope.row.material_shortage == 0">缺料</el-button>
                                    <el-button text type="success" size="small" v-auth="'assemble.shortage'" v-else>已缺料</el-button>
                                    <!--  v-if="scope.row.material_shortage == 0 && scope.row.complete == 0" -->
                                </template>
                            </el-popconfirm>
                            <el-popconfirm title="是否执行该操作" @confirm="table_over(scope.row)">
                                <template #reference>
                                    <el-button text type="primary" size="small" v-auth="'assemble.over'" v-if="scope.row.complete == 0">完成</el-button>
                                    <el-button text type="success" size="small" v-auth="'assemble.over'" v-else>已完成</el-button>
                                    <!--  v-if="scope.row.material_shortage == 0 && scope.row.complete == 0" -->
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog><!-- 增删数据 -->
    <check-status v-if="dialog.check" ref="checkDialog" @success="handleSuccess" @closed="dialog.check = false"></check-status><!-- 审核 -->
</template>

<script>
import saveDialog from './save'
import CheckStatus from '../checkStatus.vue'

export default {
	name: 'BOM列表',
	components: {
		saveDialog,CheckStatus,
	},
	data() {
		return {
			dialog: {
				save: false,
				check: false,
			},
			apiObj: this.$API.production.assembly.list,
			selection: [],
			search: {
				production_code: null,
                complete: null,
                goods_model: null,
                contract_code: null,
			},
            groupId: "0",
            query: {
                complete: 0,
            },
		}
	},
	mounted() {
	},
	methods: {
        cellStyle(row){
            let cellStyle = '';
            switch(row.row.is_stock){
                case 1:
                    cellStyle = {color:'#000',backgroundColor:'rgba(255, 63, 13, 0.1)'}
                    break;
                default:
                    cellStyle = {color:'#000',backgroundColor:'#ffffff'}
            }
            return cellStyle
        },
        async exportExcel(){
            var ids = this.selection.map(v => v.id)
            let query = {
                export:2,
                ids: ids
            }
            var res = await this.$API.production.assembly.list.get(query);
            if (res.code == 2) {
                const fileUrl = res.data.url;
                const link = document.createElement("a");
                link.href = fileUrl;
                link.download = fileUrl;
                link.click();
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
        // 完成
        async table_over(row) {
			var reqData = { id: row.id }
			var res = await this.$API.production.assembly.over.get(reqData);
			if (res.code == 1) {
                this.$refs.table.refresh()
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
        // 缺料
        async table_shortage(row) {
			var reqData = { id: row.id }
			var res = await this.$API.production.assembly.shortage.get(reqData);
			if (res.code == 1) {
                this.$refs.table.refresh()
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//删除
		async table_del(row, index) {
			var reqData = { id: row.id }
			var res = await this.$API.production.assembly.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.tableData.splice(index, 1);
                this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
        async batch_end() {
            var ids = [];
            this.selection.forEach((item) => {
                ids.push(item.id)
            })
            var res = await this.$API.production.assembly.over.get({ id: ids });
            if (res.code == 1) {
                this.$refs.table.refresh()
                this.$message.success("操作成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
        },
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        refresh(){
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		},
        cellClick(row) {
			row.flag = true
			var that = this
			setTimeout(function () {
				that.$nextTick(() => {
					that.$refs['hole' + row.id].focus()
				})
			}, 100)
		},
        async cell_save(row) {
			row.flag = false
            var reqData = { id: row.id,hole:row.hole }
			var res = await this.$API.production.assembly.edithole.get(reqData);
			if (res.code == 1) {
                this.$refs.table.refresh()
				this.$message.success("修改成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
        tabChange(e){
            if(e != 2){
                this.groupId = e
                this.search.complete = e
            }else {
                this.search.complete = null
            }
            this.upsearch()
        },
	}
}
</script>

<style></style>
